<template>
  <div class="setmeal-edit-page">
    <div class="page-header">
      <div class="title">{{ isEdit ? '编辑套餐' : '新增套餐' }}</div>
      <div class="desc">{{ isEdit ? '修改套餐信息和包含的菜品' : '添加新的套餐和包含的菜品' }}</div>
    </div>

    <div class="content-card">
      <el-form 
        ref="setmealFormRef" 
        :model="setmealForm" 
        :rules="rules" 
        label-width="100px"
        class="setmeal-form"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="套餐名称" prop="name">
              <el-input v-model="setmealForm.name" placeholder="请输入套餐名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="套餐分类" prop="categoryId">
              <el-select v-model="setmealForm.categoryId" placeholder="请选择套餐分类" style="width: 100%">
                <el-option 
                  v-for="item in categoryList" 
                  :key="item.id" 
                  :label="item.name" 
                  :value="item.id" 
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="套餐价格" prop="price">
              <el-input-number 
                v-model="setmealForm.price" 
                :min="0" 
                :max="99999" 
                :precision="2" 
                :step="1"
                style="width: 100%"
              />
              <div class="form-tip">单位：元（精确到分）</div>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="isEdit">
            <el-form-item label="套餐状态">
              <el-radio-group v-model="setmealForm.status">
                <el-radio :label="1">起售</el-radio>
                <el-radio :label="0">停售</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="套餐图片" prop="image">
          <el-upload
            class="setmeal-uploader"
            :http-request="handleUpload"
            :show-file-list="false"
            :before-upload="beforeUpload"
            accept="image/jpeg,image/png,image/jpg,image/gif"
          >
            <img v-if="setmealForm.image" :src="setmealForm.image" class="setmeal-image" />
            <el-icon v-else class="setmeal-uploader-icon"><Plus /></el-icon>
          </el-upload>
          <div class="form-tip">建议上传图片尺寸为500×500，大小不超过2MB</div>
        </el-form-item>

        <el-form-item label="套餐描述">
          <el-input 
            v-model="setmealForm.description" 
            type="textarea" 
            :rows="3" 
            placeholder="请输入套餐描述"
          />
        </el-form-item>

        <!-- 包含的菜品 -->
        <el-form-item label="包含菜品">
          <div class="dish-container">
            <div class="add-dish">
              <el-button type="primary" @click="openDishSelector" plain class="dish-btn">
                <el-icon><Plus /></el-icon>
                <span>添加菜品</span>
              </el-button>
            </div>
            
            <el-table 
              v-if="setmealForm.setmealDishes && setmealForm.setmealDishes.length > 0" 
              :data="setmealForm.setmealDishes" 
              border 
              style="width: 100%"
              class="dish-table"
              :header-cell-style="{background:'#f9f9fa', color: '#303133', fontWeight: '500'}"
              :row-class-name="(_, rowIndex) => rowIndex % 2 === 0 ? 'row-even' : 'row-odd'"
            >
              <el-table-column label="菜品名称" prop="name" min-width="200" />
              <el-table-column label="分类" prop="categoryName" width="120" />
              <el-table-column label="原价" width="120">
                <template #default="{ row }">
                  <span class="price-text">￥{{ parseFloat(row.price).toFixed(2) }}</span>
                </template>
              </el-table-column>
              <el-table-column label="份数" width="120">
                <template #default="{ row }">
                  <el-input-number 
                    v-model="row.copies" 
                    :min="1" 
                    :max="99"
                    size="small"
                    class="copies-input"
                  />
                </template>
              </el-table-column>
              <el-table-column label="操作" width="120" align="center">
                <template #default="{ $index }">
                  <el-button 
                    type="danger" 
                    link
                    @click="removeDish($index)"
                    class="op-button-danger"
                  >
                    <el-icon><Delete /></el-icon>
                    <span>删除</span>
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <div v-else class="empty-dish">
              <el-empty description="未添加任何菜品" />
            </div>
          </div>
        </el-form-item>
      </el-form>

      <div class="form-actions">
        <el-button @click="goBack" class="cancel-btn">取消</el-button>
        <el-button type="primary" @click="submitForm" class="submit-btn">保存</el-button>
      </div>
    </div>

    <!-- 选择菜品对话框 -->
    <el-dialog 
      v-model="dishDialogVisible" 
      title="添加菜品" 
      width="800px" 
      destroy-on-close
      custom-class="dish-dialog"
    >
      <div class="dish-selector">
        <div class="dish-filter">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-input
                v-model="dishSearchKeyword"
                placeholder="请输入菜品名称搜索"
                clearable
                @input="filterDishes"
                class="search-input"
              >
                <template #prefix>
                  <el-icon><Search /></el-icon>
                </template>
              </el-input>
            </el-col>
            <el-col :span="12">
              <el-select 
                v-model="selectedDishCategory" 
                placeholder="请选择菜品分类" 
                clearable
                style="width: 100%"
                @change="handleDishCategoryChange"
                class="category-select"
              >
                <el-option 
                  v-for="item in dishCategoryList" 
                  :key="item.id" 
                  :label="item.name" 
                  :value="item.id" 
                />
              </el-select>
            </el-col>
          </el-row>
        </div>
        
        <div class="dish-list">
          <div class="category-sidebar">
            <div
              v-for="category in dishCategoryList"
              :key="category.id"
              :class="['category-item', selectedDishCategory === category.id ? 'active' : '']"
              @click="selectedDishCategory = category.id; handleDishCategoryChange()"
            >
              {{ category.name }}
            </div>
          </div>
          
          <div class="dish-content">
            <div class="selected-info" v-if="selectedDishes.length > 0">
              已选择 <span class="selected-count">{{ selectedDishes.length }}</span> 个菜品
            </div>
            
            <div v-if="loadingDishes" class="loading-container">
              <el-skeleton :rows="3" animated />
            </div>
            
            <div v-else-if="dishList.length === 0" class="empty-result">
              <el-empty description="暂无菜品数据" :image-size="120" />
            </div>
            
            <div v-else class="dish-grid">
              <div
                v-for="dish in filteredDishList"
                :key="dish.id"
                :class="['dish-card', isSelected(dish) ? 'selected' : '']"
                @click="toggleSelectDish(dish)"
              >
                <div class="dish-card-header">
                  <div class="dish-image-container">
                    <img :src="dish.image" :alt="dish.name" class="dish-image" />
                  </div>
                  <div class="dish-checkbox">
                    <el-checkbox v-model="dish.selected"></el-checkbox>
                  </div>
                </div>
                <div class="dish-info">
                  <div class="dish-name">{{ dish.name }}</div>
                  <div class="dish-price">￥{{ parseFloat(dish.price).toFixed(2) }}</div>
                </div>
                <div class="dish-footer" v-if="isSelected(dish)">
                  <div class="dish-copies">
                    <span class="copies-label">份数:</span>
                    <el-input-number 
                      v-model="dish.copies" 
                      :min="1" 
                      :max="99"
                      size="small"
                      @change="updateDishCopies(dish)"
                      class="copies-input"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <div class="pagination-container">
          <el-pagination
            layout="prev, pager, next"
            :current-page="dishCurrentPage"
            :page-size="dishPageSize"
            :total="dishTotal"
            @current-change="handleDishPageChange"
            background
          />
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dishDialogVisible = false" class="cancel-btn">取 消</el-button>
          <el-button type="primary" @click="confirmSelectedDishes" class="confirm-btn">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Plus, Delete, Search } from '@element-plus/icons-vue'
import setmealApi from '@/api/setmeal'
import categoryApi from '@/api/category'
import dishApi from '@/api/dish'
import commonApi from '@/api/common'

const route = useRoute()
const router = useRouter()

// 是否为编辑模式
const isEdit = computed(() => route.params.id !== undefined)

// 表单数据
const setmealFormRef = ref(null)
const setmealForm = reactive({
  id: null,
  name: '',
  categoryId: null,
  price: 0,
  status: 1,
  image: '',
  description: '',
  setmealDishes: []
})

// 表单验证规则
const rules = {
  name: [
    { required: true, message: '请输入套餐名称', trigger: 'blur' },
    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
  ],
  categoryId: [
    { required: true, message: '请选择套餐分类', trigger: 'change' }
  ],
  price: [
    { required: true, message: '请输入套餐价格', trigger: 'blur' }
  ],
  image: [
    { required: true, message: '请上传套餐图片', trigger: 'change' }
  ]
}

// 分类列表
const categoryList = ref([])

// 菜品选择对话框相关
const dishDialogVisible = ref(false)
const dishSearchKeyword = ref('')
const selectedDishCategory = ref(null)
const dishList = ref([])
const dishCategoryList = ref([])
const selectedDishes = ref([])
const loadingDishes = ref(false)
const dishCurrentPage = ref(1)
const dishPageSize = ref(10)
const dishTotal = ref(0)

// 获取菜品分类列表
const getDishCategoryList = async () => {
  try {
    // 获取菜品分类（type=1）
    const res = await categoryApi.getCategoryList(1)
    if (res.code === 1) {
      dishCategoryList.value = res.data || []
    }
  } catch (error) {
    console.error('获取菜品分类列表失败:', error)
    ElMessage.error('获取菜品分类列表失败')
  }
}

// 获取套餐分类列表
const getCategoryList = async () => {
  try {
    // 获取套餐分类（type=2）
    const res = await categoryApi.getCategoryList(2)
    if (res.code === 1) {
      categoryList.value = res.data || []
    }
  } catch (error) {
    console.error('获取套餐分类列表失败:', error)
    ElMessage.error('获取套餐分类列表失败')
  }
}

// 获取套餐详情
const getSetmealDetail = async () => {
  if (!isEdit.value) return
  
  try {
    const id = route.params.id
    const res = await setmealApi.getSetmealById(id)
    if (res.code === 1) {
      // 处理价格
      let setmealData = { ...res.data }
      
      // 处理包含的菜品数据
      if (setmealData.setmealDishes && setmealData.setmealDishes.length > 0) {
        setmealData.setmealDishes = setmealData.setmealDishes.map(dish => {
          return {
            ...dish,
            copies: dish.copies || 1
          }
        })
      } else {
        setmealData.setmealDishes = []
      }
      
      // 更新表单数据
      Object.assign(setmealForm, setmealData)
    }
  } catch (error) {
    console.error('获取套餐详情失败:', error)
    ElMessage.error('获取套餐详情失败')
  }
}

// 图片上传前验证
const beforeUpload = (file) => {
  const isImage = /^image\/(jpeg|png|jpg|gif)$/.test(file.type)
  const isLt2M = file.size / 1024 / 1024 < 2
  
  if (!isImage) {
    ElMessage.error('只能上传 JPG/PNG/GIF 格式的图片!')
    return false
  }
  
  if (!isLt2M) {
    ElMessage.error('图片大小不能超过 2MB!')
    return false
  }
  
  return true
}

// 自定义上传处理
const handleUpload = async (options) => {
  try {
    const res = await commonApi.upload(options.file)
    if (res.code === 1) {
      setmealForm.image = res.data
      ElMessage.success('图片上传成功')
    }
  } catch (error) {
    console.error('图片上传失败:', error)
    ElMessage.error('图片上传失败')
  }
}

// 打开菜品选择器
const openDishSelector = async () => {
  dishSearchKeyword.value = ''
  selectedDishCategory.value = null
  dishCurrentPage.value = 1
  
  // 初始化已选菜品
  selectedDishes.value = [...setmealForm.setmealDishes]
  
  // 添加选中和份数属性到所有菜品
  dishList.value = dishList.value.map(dish => {
    const found = selectedDishes.value.find(d => d.dishId === dish.id)
    return {
      ...dish,
      copies: found ? found.copies : 1,
      selected: !!found
    }
  })
  
  // 获取菜品分类和菜品列表
  await getDishCategoryList()
  await getDishList()
  
  dishDialogVisible.value = true
}

// 获取菜品列表
const getDishList = async () => {
  loadingDishes.value = true
  try {
    const params = {
      page: dishCurrentPage.value,
      pageSize: dishPageSize.value
    }
    
    if (selectedDishCategory.value) {
      params.categoryId = selectedDishCategory.value
    }
    
    if (dishSearchKeyword.value) {
      params.name = dishSearchKeyword.value
    }
    
    const res = await dishApi.getDishPage(params)
    if (res.code === 1) {
      // 标记哪些菜品已被选中
      const dishes = res.data.records || []
      dishList.value = dishes.map(dish => {
        const selected = selectedDishes.value.find(d => d.dishId === dish.id)
        return {
          ...dish,
          copies: selected ? selected.copies : 1,
          selected: !!selected
        }
      })
      dishTotal.value = res.data.total || 0
    }
  } catch (error) {
    console.error('获取菜品列表失败:', error)
    ElMessage.error('获取菜品列表失败')
  } finally {
    loadingDishes.value = false
  }
}

// 过滤菜品
const filteredDishList = computed(() => {
  return dishList.value.map(dish => {
    // 检查是否被选中
    const selected = selectedDishes.value.find(d => d.dishId === dish.id)
    return {
      ...dish,
      copies: selected ? selected.copies : dish.copies || 1,
      selected: !!selected
    }
  })
})

// 判断菜品是否被选中
const isSelected = (dish) => {
  return selectedDishes.value.some(d => d.dishId === dish.id)
}

// 菜品选择变化
const handleDishSelectionChange = (selection) => {
  // 更新选中的菜品
  selectedDishes.value = selection.map(dish => ({
    dishId: dish.id,
    name: dish.name,
    price: dish.price,
    image: dish.image,
    copies: dish.copies || 1,
    categoryId: dish.categoryId,
    categoryName: dish.categoryName,
  }))
}

// 菜品分类变化
const handleDishCategoryChange = () => {
  dishCurrentPage.value = 1
  getDishList()
}

// 搜索关键词变化
const filterDishes = () => {
  dishCurrentPage.value = 1
  getDishList()
}

// 菜品分页变化
const handleDishPageChange = (page) => {
  dishCurrentPage.value = page
  getDishList()
}

// 确认选择的菜品
const confirmSelectedDishes = () => {
  // 将选中的菜品添加到套餐中
  setmealForm.setmealDishes = selectedDishes.value
  dishDialogVisible.value = false
  ElMessage.success(`已添加${selectedDishes.value.length}个菜品到套餐`)
}

// 删除已选菜品
const removeDish = (index) => {
  setmealForm.setmealDishes.splice(index, 1)
}

// 提交表单
const submitForm = async () => {
  setmealFormRef.value.validate(async (valid) => {
    if (valid) {
      try {
        // 验证是否添加了菜品
        if (!setmealForm.setmealDishes || setmealForm.setmealDishes.length === 0) {
          ElMessage.warning('请至少添加一个菜品')
          return
        }
        
        // 处理价格
        const submitData = { ...setmealForm }
        
        // 处理菜品数据
        submitData.setmealDishes = submitData.setmealDishes.map(dish => ({
          ...dish,
          copies: parseInt(dish.copies)
        }))
        
        // 根据是否编辑模式选择API方法
        const apiMethod = isEdit.value ? setmealApi.updateSetmeal : setmealApi.addSetmeal
        const res = await apiMethod(submitData)
        
        if (res.code === 1) {
          ElMessage.success(isEdit.value ? '修改成功' : '添加成功')
          goBack()
        }
      } catch (error) {
        console.error(isEdit.value ? '修改套餐失败:' : '添加套餐失败:', error)
        ElMessage.error(isEdit.value ? '修改套餐失败' : '添加套餐失败')
      }
    } else {
      return false
    }
  })
}

// 返回列表页
const goBack = () => {
  router.push('/setmeal')
}

// 切换菜品选择状态
const toggleSelectDish = (dish) => {
  dish.selected = !dish.selected;
  
  if (dish.selected) {
    // 添加到已选菜品
    selectedDishes.value.push({
      dishId: dish.id,
      name: dish.name,
      price: dish.price,
      image: dish.image,
      copies: dish.copies || 1,
      categoryId: dish.categoryId,
      categoryName: dish.categoryName,
    });
  } else {
    // 从已选菜品中移除
    const index = selectedDishes.value.findIndex(d => d.dishId === dish.id);
    if (index !== -1) {
      selectedDishes.value.splice(index, 1);
    }
  }
}

// 更新菜品份数
const updateDishCopies = (dish) => {
  const selected = selectedDishes.value.find(d => d.dishId === dish.id);
  if (selected) {
    selected.copies = dish.copies;
  }
}

// 生命周期
onMounted(() => {
  getCategoryList()
  getSetmealDetail()
})
</script>

<style scoped>
.setmeal-edit-page {
  background: #f9f9f9;
  min-height: calc(100vh - 50px);
  padding: 24px;
  transition: all 0.3s;
}

.page-header {
  margin-bottom: 24px;
  border-left: 4px solid #409EFF;
  padding-left: 16px;
}

.page-header .title {
  font-size: 24px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 8px;
  transition: all 0.3s;
}

.page-header .desc {
  font-size: 14px;
  color: #606266;
}

.content-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
  padding: 30px;
  transition: all 0.3s;
}

.setmeal-form {
  margin: 20px 0;
}

.form-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #f0f0f0;
}

.cancel-btn {
  margin-right: 12px;
  transition: all 0.3s;
}

.submit-btn, .confirm-btn {
  transition: all 0.3s;
  box-shadow: 0 2px 6px rgba(64, 158, 255, 0.2);
}

.setmeal-uploader {
  width: 180px;
  height: 180px;
  border: 2px dashed #e0e0e0;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
}

.setmeal-uploader:hover {
  border-color: #409EFF;
  background-color: rgba(64, 158, 255, 0.05);
}

.setmeal-uploader-icon {
  font-size: 40px;
  color: #c0c4cc;
  width: 180px;
  height: 180px;
  line-height: 180px;
  text-align: center;
  transition: color 0.3s;
}

.setmeal-uploader:hover .setmeal-uploader-icon {
  color: #409EFF;
}

.setmeal-image {
  width: 180px;
  height: 180px;
  display: block;
  object-fit: cover;
  border-radius: 4px;
}

.dish-container {
  margin-top: 10px;
}

.add-dish {
  margin-bottom: 20px;
}

.dish-btn {
  display: flex;
  align-items: center;
}

.dish-btn .el-icon {
  margin-right: 4px;
}

.dish-table {
  margin-bottom: 20px;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.empty-dish {
  padding: 40px 0;
  background: #fafafa;
  border-radius: 8px;
  border: 1px dashed #e0e0e0;
}

/* 对话框样式 */:deep(.dish-dialog .el-dialog__header) {  border-bottom: 1px solid #f0f0f0;  padding: 20px;}:deep(.dish-dialog .el-dialog__body) {  padding: 20px;}:deep(.dish-dialog .el-dialog__footer) {  border-top: 1px solid #f0f0f0;  padding: 15px 20px;}

.dish-selector {
  height: 500px;
  display: flex;
  flex-direction: column;
}

.dish-filter {
  margin-bottom: 15px;
}

.dish-list {
  display: flex;
  flex: 1;
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 15px;
  height: 400px;
}

.category-sidebar {
  width: 120px;
  border-right: 1px solid #f0f0f0;
  overflow-y: auto;
  background: #f9f9f9;
}

.category-item {  padding: 12px 15px;  font-size: 14px;  cursor: pointer;  border-bottom: 1px solid #f5f5f5;  transition: all 0.3s;}.category-item:hover {  background: #f0f0f0;}.category-item.active {  background: #fff;  color: #409EFF;  font-weight: 500;  position: relative;}.category-item.active::before {  content: '';  position: absolute;  left: 0;  top: 0;  bottom: 0;  width: 3px;  background: #409EFF;}

.dish-content {
  flex: 1;
  padding: 15px;
  overflow-y: auto;
  position: relative;
}

.selected-info {
  margin-bottom: 15px;
  font-size: 14px;
  color: #606266;
}

.selected-count {
  color: #ff4d4f;
  font-weight: bold;
}

.dish-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.dish-card {
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s;
  cursor: pointer;
  background: #fff;
  position: relative;
}

.dish-card:hover {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.dish-card.selected {
  border-color: #409EFF;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.dish-card.selected:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 30px 30px 0;
  border-color: transparent #409EFF transparent transparent;
  z-index: 2;
}

.dish-card-header {
  position: relative;
}

.dish-image-container {
  width: 100%;
  height: 120px;
  overflow: hidden;
}

.dish-image {  width: 100%;  height: 100%;  object-fit: cover;  transition: transform 0.3s;}.dish-card:hover .dish-image {  transform: scale(1.05);}

.dish-checkbox {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

:deep(.dish-checkbox .el-checkbox__inner) {
  border-color: #409EFF;
}

:deep(.dish-checkbox .el-checkbox__input.is-checked .el-checkbox__inner) {
  background-color: #409EFF;
  border-color: #409EFF;
}

.dish-info {
  padding: 10px;
}

.dish-name {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dish-price {
  color: #f56c6c;
  font-size: 14px;
  font-weight: 500;
}

.dish-footer {
  padding: 8px 10px;
  background: #f9f9f9;
  border-top: 1px solid #f0f0f0;
}

.dish-copies {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.copies-label {
  font-size: 12px;
  color: #909399;
}

.copies-input {
  width: 90px;
}

.loading-container, .empty-result {
  padding: 40px 0;
  text-align: center;
}

.empty-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.empty-image {
  width: 120px;
  height: 120px;
  margin-bottom: 15px;
}

.empty-text {
  color: #909399;
  font-size: 14px;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 15px;
}

/* 表单样式增强 */
:deep(.el-form-item__label) {
  font-weight: 500;
  color: #303133;
}

:deep(.el-input__wrapper),
:deep(.el-textarea__inner) {
  box-shadow: 0 0 0 1px #dcdfe6;
  transition: all 0.3s;
}

:deep(.el-input__wrapper:hover),
:deep(.el-textarea__inner:hover) {
  box-shadow: 0 0 0 1px #c0c4cc;
}

:deep(.el-input__wrapper.is-focus),
:deep(.el-textarea__inner:focus) {
  box-shadow: 0 0 0 1px #409EFF;
}

/* 表格样式 */
:deep(.el-table) {
  border-radius: 8px;
  overflow: hidden;
}

:deep(.el-table th.el-table__cell) {
  background-color: #f9f9fa !important;
}

:deep(.row-even) {
  background-color: #fafafa;
}

:deep(.row-odd) {
  background-color: #fff;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .setmeal-edit-page {
    padding: 16px;
  }
  
  .content-card {
    padding: 20px;
  }
  
  .page-header .title {
    font-size: 20px;
  }
}
</style> 